<template>
  <div class="skillgroup_node_edit">
    <div class="btn_box">
      <el-button type="primary" class="primary_btn" @click="saveEdit">{{$t('public.save')}}</el-button>
      <!--<el-button v-show="nodeObj._id && showDeleteBtn" type="primary" class="primary_btn delete_btn" @click="deleteLi">{{$t('public.delete')}}</el-button>-->
    </div>
    <el-form :model="nodeObj" label-width="100px" ref="nodeObj" :rules="rulesOne">
      <el-form-item class="form_li"  prop="name"  :label="$t('configLazyLoad.process.nodeName')">
        <el-input :maxlength="30" v-model.trim="nodeObj.name" class="input_box node_name"></el-input>
      </el-form-item>
      <el-form-item class="form_li"  prop="robot"  :label="$t('configLazyLoad.process.processLabel126')">
        <el-select size="mini" @visible-change="robotSelectShow" v-model="nodeObj.robot" :placeholder="$t('public.pleasePick')" style="width:220px;">
          <el-option value="">{{$t('public.pleasePick')}}</el-option>
          <el-option
            v-for="item in allrobotOptions"
            :key="item._id"
            :label="item.robot_name_new"
            :disabled="item.disabled"
            :value="item._id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :model="nodeObj" label-width="290px">
      <el-form-item class="form_li"  prop="wechatProcessTo" :label="$t('configLazyLoad.process.processLabel127')">
        <nodeSelect
          @oneChange="onChange"
          onePath="wechatProcessType"
          :nodeType="nodeObj.wechatProcessType"
          @twoChange="onChange"
          twoPath="wechatProcessTo"
          :contentId="nodeObj._id"
          :nodeLi="nodeObj.wechatProcessTo"
          currentType="robot"
        ></nodeSelect>
      </el-form-item>
      <el-form-item class="form_li"  prop="weiboProcessTo" :label="$t('configLazyLoad.process.processLabel128')">
        <nodeSelect
          @oneChange="onChange"
          onePath="weiboProcessType"
          :nodeType="nodeObj.weiboProcessType"
          @twoChange="onChange"
          twoPath="weiboProcessTo"
          :contentId="nodeObj._id"
          :nodeLi="nodeObj.weiboProcessTo"
          currentType="robot"
        ></nodeSelect>
      </el-form-item>
      <el-form-item class="form_li"  prop="commonProcessTo" :label="$t('configLazyLoad.process.processLabel129')">
        <nodeSelect
          @oneChange="onChange"
          onePath="commonProcessType"
          :nodeType="nodeObj.commonProcessType"
          @twoChange="onChange"
          twoPath="commonProcessTo"
          :contentId="nodeObj._id"
          :nodeLi="nodeObj.commonProcessTo"
          currentType="robot"
        ></nodeSelect>
      </el-form-item>
    </el-form>
  </div>
  </template>
<script>
  import * as types from '@modules/config/channelConfig/webchatSchdule/mutation-types.js'
  import { deepClone } from '@utils/m7Utils.js'
  import nodeSelect from '../../../base/webchatNodeSelect.vue'
  export default{
    name: 'robotNodeEdit',
    data () {
      return {
        showForm: false,
        optionsOne: [],
        rulesOne: {
          name: [
            { required: true, message: this.$t('configLazyLoad.process.processLabel7'), trigger: 'blur' }
          ],
          robot: [
            { message: this.$t('configLazyLoad.process.processLabel130'), trigger: 'change' }
          ]
        },
        robotConfig: [],
        allrobotOptions: [],
        aiRobots: [],
        nodeObj: {
          _id: '', // id
          account: '', // 账户id
          type: 'robot', // 节点类型
          name: '', // 名称
          robotType: '', // 机器人类型
          robot: '', // 机器人id
          robotName: '', // 机器人名称
          createTime: '', // 创建时间
          createUser: '', // 创建人
          updateTime: '', // 修改时间
          updateUser: '', // 修改人
          nextNodeIds: [''], // 流转节点id数组
          commonProcessType: 'system', // web/sdk转人工流转节点类型
          commonProcessTo: 'finish', // web/sdk转人工流转节点id
          wechatProcessType: 'system', // 微信转人工流转节点类型
          wechatProcessTo: 'finish', // 微信转人工流转节点id
          weiboProcessType: 'system', // 微博转人工流转节点类型
          weiboProcessTo: 'finish' // 微博转人工流转节点id
        }
      }
    },
    props: {
      dataId: {
        type: String,
        default: ''
      },
      showDeleteBtn: {
        type: Boolean,
        default: true
      },
      random: Number,
      todoType: String
    },
    watch: {
      random () {
        this.resetForm()
        this.initData()
      }
    },
    methods: {
      initData () {
        this.showForm = false
        if (this.dataId) {
          let data = {
            _id: this.dataId
          }
          this.$store.dispatch('getNodeById', data).then((res) => {
            if (res.success) {
              this.$nextTick(() => {
                this.nodeObj = deepClone(res.data)
              })
            }
            this.showForm = true
          })
        } else {
          this.nodeObj = {
            _id: '', // id
            account: '', // 账户id
            type: 'robot', // 节点类型
            name: '', // 名称
            robotType: '', // 机器人类型
            robot: '', // 机器人id
            robotName: '', // 机器人名称
            createTime: '', // 创建时间
            createUser: '', // 创建人
            updateTime: '', // 修改时间
            updateUser: '', // 修改人
            nextNodeIds: [''], // 流转节点id数组
            commonProcessType: 'system', // web/sdk转人工流转节点类型
            commonProcessTo: 'finish', // web/sdk转人工流转节点id
            wechatProcessType: 'system', // 微信转人工流转节点类型
            wechatProcessTo: 'finish', // 微信转人工流转节点id
            weiboProcessType: 'system', // 微博转人工流转节点类型
            weiboProcessTo: 'finish' // 微博转人工流转节点id
          }
          this.showForm = true
        }
        this.$store.dispatch('getCache', {type: 'robotConfig'}).then((res) => {
          if (res) {
            this.robotConfig = deepClone(res)
          }
          this.$store.dispatch('queryM7AIRobot', {}).then((res2) => {
            if (res2 && res2.success && res2.data && res2.data.length > 0) {
              let aiRobot = res2.data
              aiRobot.forEach((item1) => {
                item1._id = item1.Id
                item1.robot_name_new = item1.Nick
              })
              this.aiRobots = aiRobot
              let configArr = []
              this.robotConfig.forEach((config) => {
                if (config.robot_type !== 'didi') {
                  configArr.push(config)
                }
              })
              this.allrobotOptions = configArr.concat(this.aiRobots)
            } else {
              this.allrobotOptions = this.robotConfig
            }
          })
        })
        // 判断小七是否回显
        if (this.$store.state.isM7RobotOpen === false) {
          if (this.nodeObj.robot === '5825a500dfe52d5edc6e36c9') {
            this.nodeObj.robot = ''
          }
        }
      },
      robotSelectShow (show) {
        if (show) {
          this.$store.dispatch('queryM7AIRobot', {}).then((res2) => {
            if (res2 && res2.success && res2.data && res2.data.length > 0) {
              let aiRobot = res2.data
              let allRobot = this.allrobotOptions
              aiRobot.forEach((item1) => {
                item1._id = item1.Id
                item1.robot_name_new = item1.Nick
                let exist = allRobot.findIndex((all) => {
                  return all.Id === item1.Id
                })
                if (exist === undefined) {
                  allRobot.push(item1)
                } else {
                  allRobot.splice(exist, 1, item1)
                }
              })
              this.aiRobots = aiRobot
              this.allrobotOptions = allRobot
            }
          })
        }
      },
      onChange (data) {
        this.nodeObj[data.path] = data.value
      },
      resetForm () {
        this.$refs['nodeObj'].resetFields()
      },
      addOne (index) {
        if (index === 0) {
          this.nodeObj.welcomeMessages.push({content: '', startTime: '', endTime: ''})
        } else {
          this.nodeObj.welcomeMessages.splice(index, 1)
        }
      },
      saveEdit () {
        let that = this
        this.$refs['nodeObj'].validate((valid) => {
          if (valid) {
            if (!that.nodeObj.robot) {
              this.$message.error(this.$t('configLazyLoad.process.processLabel131'))
              return
            }
            this.allrobotOptions.map((item) => {
              if (item._id === that.nodeObj.robot) {
                that.nodeObj.robotName = item.robot_name_new
                if (item.Nick) {
                  that.nodeObj.robotType = item.robotType
                  that.nodeObj.robotName = item.Nick
                } else {
                  that.nodeObj.robotType = item.robot_type_new
                }
              }
            })
            if (this.todoType === 'add') {
              that.$store.dispatch('addNode', that.nodeObj).then((res) => {
                if (res.success) {
                  that.$store.commit(types.ADD_WEBCHAT_SCHDULE_LIST_NODE, {node: 'robotNode', data: that.nodeObj})
                  this.$message.success(this.$t('config.customer.addSucc'))
                  this.$emit('back')
                }
              })
            } else {
              that.$store.dispatch('updateNode', that.nodeObj).then((res) => {
                if (res.success) {
                  that.$store.commit(types.UPDATE_WEBCHAT_SCHDULE_LIST_NODE, {node: 'robotNode', data: that.nodeObj})
                  this.$message.success(this.$t('configLazyLoad.public.editSuccess'))
                  this.$emit('back')
                }
              })
            }
          }
        })
      }
    },
    components: {
      nodeSelect
    },
    beforeMount () {
      this.initData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../../assets/common.styl"
  .btn_box
    text-align right
    margin-bottom 10px
  .delete_btn
    background-color #ff6b6b
    border-color #ff6b6b
  .skillgroup_node_edit
    padding 10px
  .queue_num_box
    display inline-block
    margin 0 12px 0 -170px
    font-size 12px
    color $cf-gray1
  .queue_num_input
    display inline-block
    width 50px
  .overflow
    oerflow hidden
  .unUseing
    width 250px
  .msg_list_box
    position relative
    padding 8px 28px 8px 8px
    background #f4f4f4
  .msg_time_box
    margin-top 8px
    .input_box
      width 120px
      display inline-block
  .todo_btn
    cursor pointer
    position absolute
    right 8px
    color $c-main
  .welcome_msg_box
    display block
  .title
    margin 10px 0 14px
  .switch_box
    margin-top 10px
  .node_name
    width 400px
  .start_input
    position relative
    margin-right 24px
    &:before
      content: ''
      border-top 2px solid $c-border2
      width 16px
      position absolute
      top 15px
      right -20px
</style>
